window.onload = function() {
    // 鼠标悬浮图标，放大;点击切换
    function logoMouse() {
        var career_logo = document.getElementById("career_logos").getElementsByTagName("li");
        
        function clear(m) {
            for(var i = 0;i < career_logo.length;i++) {
                career_logo[i].style.transform = "";
            }
            career_logo[m].style.transform = "scale(1.5)";
        }
        
        for(var i = 0;i < career_logo.length;i++) {
             (function(i) {
                 career_logo[i].onmouseover = function() {
                    clear(i);
                career_logo[i].onmouseout = function() {
                    career_logo[i].style.transform = "";
                }
                 }
             })(i)
        }
    }
    logoMouse();  
}
// 点击右侧图标，文字、视频切换，背景颜色改变
function changeVal() {
    // 绑定
    var backBtn = document.getElementsByClassName("back")[0];
    var front_endBtn = document.getElementById("front_end");
    var opermaintBtn = document.getElementsByClassName("opermaint")[0];
    var productBtn = document.getElementsByClassName("product")[0];
    var operationBtn = document.getElementsByClassName("operation")[0];
    var designBtn = document.getElementsByClassName("design")[0];
    var marketBtn = document.getElementsByClassName("market")[0];
    var vedios = document.getElementById("vedio");
    var func = document.getElementById("func");
    var skill = document.getElementById("skill");
    var name = document.getElementById("name");
    var wrapper = document.getElementById('wrapper');
    
    var lists = [
        back = {
            name: "后台",
            func: "根据正在处理的应用程序的大小和范围，后台开发人员要做的事情有很大的不同。但总体来说工作都是对应用程序中的业务逻辑，以及从前端提取和检索数据",
            skill: "精通JAVASE，JAVAEE，数据库，能熟练操作Linux，熟练使用Github"
        },
        front_end = {
            name: "前端",
            func: "前端开发人员负责编写网页，并增加相应的动态交互功能，同时与后端结合，致力于提高用户体验",
            skill: "精通JS等相关语言,能够处理网络请求,能熟练使用框架，熟悉Git"
        },
        opermaint = {
            name: "运维",
            func: "运维工程师负责生产环境、测试环境的配置、运维和自动化。运维工程师可分为DBA、SRE、DevOps和云计算工程师。",
            skill: "Linux，操作系统，计算机网络，计算机组成，Python"
        },
        product = {
            name: "市场",
            func: "工作室产品经理负责与商家、用户沟通，了解需求从而定义产品功能，并负责后期产品迭代以及产品商业化",
            skill: "执行力强，善于沟通，热爱互联网，喜欢探索，喜欢追求极致"
        },
        operation = {
            name: "运营",
            func: "工作室产品运营负责产品拉新、留存、促活、变现、传播。简单来讲就是为工作室“割韭菜”",
            skill: "熟悉用户心理，拥有良好的沟通能力，对数据敏感"
        },
        design = {
            name: "设计",
            func: "工作室设计岗负责处理产品经理原型稿，以及工作室海报，VI，UI等相关设计",
            skill: "熟练使用PS、PR、PE，审美nice"
        },
        market = {
            name: "市场",
            func: "工作室市场部负责面向商家谈判，为工作室拉项目，并且负责与赞助商谈判，从而实现工作室利益最大化",
            skill: "有人脉、有气场，懂得谈判的技巧，善于沟通，勇于主动交流"
        }
    ]
    // 前端
    front_endBtn.onclick = function() {
        name.innerHTML = front_end.name;
        func.innerHTML = front_end.func;
        skill.innerHTML = front_end.skill;
        vedios.src = 'http://player.bilibili.com/player.html?aid=86944503&bvid=BV1v7411H7S1&cid=148578039&page=1',
        wrapper.style.backgroundColor = 'rgba(235, 115, 71,0.04)';
    }
    // 后台
    backBtn.onclick = function() {
        name.innerHTML = back.name;
        func.innerHTML = back.func;
        skill.innerHTML = back.skill; 
        vedios.src = 'http://player.bilibili.com/player.html?aid=86709769&bvid=BV1N7411W7Bn&cid=148184202&page=1',
        wrapper.style.backgroundColor = 'rgba(244, 96, 108,0.04)';
    }
    //运维
    opermaintBtn.onclick = function() {
        name.innerHTML = opermaint.name;
        func.innerHTML = opermaint.func;
        skill.innerHTML = opermaint.skill;  
        vedios.src = '';
        wrapper.style.backgroundColor = 'rgba(252, 157, 153,0.04)';
    }
    //产品
    productBtn.onclick = function() {
        name.innerHTML = product.name;
        func.innerHTML = product.func;
        skill.innerHTML = product.skill; 
        vedios.src = ''; 
        wrapper.style.backgroundColor = 'rgba(38, 166, 91,0.04)';
    },
    //运营
    operationBtn.onclick = function() {
        name.innerHTML = operation.name;
        func.innerHTML = operation.func;
        skill.innerHTML = operation.skill;  
        vedios.src = ''; 
        wrapper.style.backgroundColor = 'rgba(0, 204, 255,0.04)';
    }
    //设计
    designBtn.onclick = function() {
        name.innerHTML = design.name;
        func.innerHTML = design.func;
        skill.innerHTML = design.skill;
        vedios.src = '';  
        wrapper.style.backgroundColor = 'rgba(42, 224, 200,0.04)'; 
    }
    // 市场
    marketBtn.onclick = function() {
        name.innerHTML = market.name;
        func.innerHTML = market.func;
        skill.innerHTML = market.skill; 
        vedios.src = '';  
        wrapper.style.backgroundColor = 'rgba(6, 82, 121,0.04)';
    }
}
changeVal();

// 控制wrapper的高度
var wrapper = document.getElementById("wrapper");
var heightZ = document.body.clientHeight;
var heightW = heightZ - 85;
wrapper.style.height = heightW + 'px';
